<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <title>数据报表快捷操作</title>
    <link rel="stylesheet" href="css/index.css">
    <!-- 引入 layui.css -->
    <link rel="stylesheet" href="https://www.layuicdn.com/layui-v2.6.8/css/layui.css">
    <!-- 引入 layui.js -->
    <script src="https://www.layuicdn.com/layui/layui.js"></script>
    <!-- 报表处理插件 -->
    <script lang="javascript" src="js/xlsx.full.min.js"></script>

</head>

<body>
    <div class="layui-form">
        <div class="layui-form-item">
            <label class="layui-form-label">点击上传原始数据表格</label>
            <div class="layui-input-block">
                <button type="button" class="layui-btn" id="initial">
                    <i class="layui-icon">&#xe67c;</i>上传数据
                </button>
            </div>
        </div>
    </div>
    <!-- 数据处理 -->
    <script>
        layui.use(['layer', 'form', 'upload'], function () {
            let { layer, form, upload } = layui;
            upload.render({
                elem: '#initial'
                , accept: 'file'
                , auto: false //选择文件后不自动上传
                , multiple: false
                , choose: function (obj) {
                    //将每次选择的文件追加到文件队列
                    var files = obj.pushFile();
                    //预读本地文件，如果是多文件，则会遍历。(不支持ie8/9)
                    obj.preview(function (index, file, result) {
                        console.log(index); //得到文件索引
                        console.log(file); //得到文件对象
                        console.log(result); //得到文件base64编码，比如图片
                        let workbook = XLSX.read(result, {
                            type: 'binary'
                        });
                        console.log(workbook)
                        //obj.resetFile(index, file, '123.jpg'); //重命名文件名，layui 2.3.0 开始新增

                        //这里还可以做一些 append 文件列表 DOM 的操作

                        //obj.upload(index, file); //对上传失败的单个文件重新上传，一般在某个事件中使用
                        //delete files[index]; //删除列表中对应的文件，一般在某个事件中使用
                    });
                }
            });
        });
    </script>
</body>

</html>